<aside class="main-sidebar" #mainSidebar>
  <section class="sidebar">
    <ul class="sidebar-menu">
      <li class="header">BASIC NAVIGATION</li>
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" [class.hide-border]="activeSubMenu">
        <a [routerLink]="['/']" (click)="activeSubMenu = ''">
          <i class="fa fa-dashboard"></i> <span>Dashboard</span>
        </a>
      </li>
      <li routerLinkActive="active" [class.hide-border]="activeSubMenu" *ngIf="!config.EnableClusterMode">
        <a [routerLink]="['/group']" (click)="activeSubMenu = ''">
          <i class="fa fa-object-group"></i> <span>Group</span>
        </a>
      </li>
      <li class="treeview" #groupMenu [class.active]="activeSubMenu == 'group'" *ngIf="config.EnableClusterMode">
        <a href="javascript:void(0)" (click)="toggleSubMenu(groupMenu, 'group')">
          <i class="fa fa-object-group"></i> <span>Groups</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu" routerLinkActive="menu-open">
          <li routerLinkActive="active">
            <a [routerLink]="['/group']">
              <i class="fa fa-cog"></i> Single
            </a>
          </li>
          <li routerLinkActive="active">
            <a [routerLink]="['/cluster']">
              <i class="fa fa-cogs"></i> Cluster
            </a>
          </li>
        </ul>
      </li>
      <li routerLinkActive="active" *ngIf="config.EnablePrivateRegistry" [class.hide-border]="activeSubMenu">
        <a [routerLink]="['/hub']" (click)="activeSubMenu = ''">
          <i class="fa fa-archive"></i> <span>Hub</span>
        </a>
      </li>
      <li routerLinkActive="active" [class.hide-border]="activeSubMenu">
        <a [routerLink]="['/activity']" (click)="activeSubMenu = ''">
          <i class="fa fa-rss"></i> <span>Activity</span>
        </a>
      </li>
      <li class="header">ADVANCE NAVIGATION</li>
      <li class="treeview" #accountMenu [class.active]="activeSubMenu == 'account'">
        <a href="javascript:void(0)" (click)="toggleSubMenu(accountMenu, 'account')">
          <i class="fa fa-user"></i> <span>Account</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu" routerLinkActive="menu-open">
          <li routerLinkActive="active">
            <a [routerLink]="['/account', 'profile']">
              <i class="fa fa-circle-o"></i> Profile
            </a>
          </li>
          <li routerLinkActive="active">
            <a [routerLink]="['/account', 'change-password']">
              <i class="fa fa-lock"></i> Change Password
            </a>
          </li>
        </ul>
      </li>
      <li class="treeview" #manageMenu [class.active]="activeSubMenu == 'manage'">
        <a href="javascript:void(0)" (click)="toggleSubMenu(manageMenu, 'manage')">
          <i class="fa fa-cube"></i> <span>Manage</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
          </span>
        </a>
        <ul class="treeview-menu" routerLinkActive="menu-open">
          <li routerLinkActive="active">
            <a [routerLink]="['/manage', 'groups']">
              <i class="fa fa-circle-o"></i> Groups
            </a>
          </li>
          <li routerLinkActive="active" *ngIf="userInfo?.IsAdmin">
            <a [routerLink]="['/manage', 'users']">
              <i class="fa fa-users"></i> Users
            </a>
          </li>
          <li routerLinkActive="active" *ngIf="userInfo?.IsAdmin">
            <a [routerLink]="['/manage', 'system-config']">
              <i class="fa fa-gear"></i> <span>System Config</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <a href="https://github.com/humpback/humpback-web" target="_blank" class="bottom-logo flex-display">
      <img src="./../../../static/images/logo.png" alt="">
      <div class="text-panel">
        <p>Humpback</p>
        <p>©2016-2017</p>
      </div>
    </a>
  </section>
</aside>